<template>
    <div>
        <el-card style="max-width: 100%">
            <!-- 搜索查询区域 -->
            <template #header>
                <div class="card-header">
                    <el-form :inline="true" :model="employee" class="demo-form-inline">
                        <el-form-item label="员工账号">
                            <el-input v-model="employee.account" placeholder="员工账号" clearable />
                        </el-form-item>
                        <el-form-item label="员工昵称">
                            <el-input v-model="employee.nickname" placeholder="员工昵称" clearable />
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="employee.telephone" placeholder="手机号" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit()">搜索</el-button>
                            <el-button plain><router-link to="/addemp">添加员工</router-link></el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <!-- 数据显示区域 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="序号" width="50px" align="center" />
                <el-table-column prop="account" label="账号" align="center" />
                <el-table-column prop="nickname" label="昵称" align="center" />
                <el-table-column prop="telephone" label="手机号" align="center" />
                <el-table-column prop="role" label="角色" align="center" />
                <el-table-column prop="isDel" label="状态" align="center">
                    <template #default="scoped">
                        <span v-if="scoped.row.isDel == 0">正常</span>
                        <span v-else-if="scoped.row.isDel == 1">禁用</span>
                        <span v-if="scoped.row.isDel == 2">离职</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px" align="center">
                    <template #default="scoped">
                        <el-button type="primary" @click="changeEmp(scoped.row), update = true">修改</el-button>
                        <el-button type="danger" @click="delEmp(scoped.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页操作区域 -->
            <template #footer>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        layout="total,  prev, pager, next" :total="tatal" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </template>
        </el-card>
        <!-- 修改员工信息按钮 -->
        <el-dialog v-model="update" title="请添加需要的信息" width="500">
            <el-form :model="updateDate">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="updateDate.account" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="updateDate.password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="updateDate.nickname" placeholder="请输入昵称" />
                </el-form-item>
                <el-form-item label="手机号" prop="telephone">
                    <el-input v-model="updateDate.telephone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-input v-model="updateDate.role" placeholder="请输入角色" />
                </el-form-item>
                <el-form-item label="状态" prop="isDel">
                    <el-select v-model="updateDate.isDel" placeholder="请输入状态">
                        <el-option label="正常" value="0" />
                        <el-option label="禁用" value="1" />
                        <el-option label="离职" value="2" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="update = false">取消</el-button>
                    <el-button type="primary" @click="updateEmp()">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
// 导入ajax的工具axios
import axios from 'axios';
import qs from 'qs';
export default {
    data() {
        return {
            // 显示的数据
            tableData: [],
            // 搜索对应的数据
            employee: {
                id: '',
                account: '',
                nickname: '',
                telephone: '',
            },
            // 分页相关参数
            currentPage4: 1,
            pageSize4: 10,
            tatal: 0,

            // 修改数据弹框按钮
            update: false,
            // 修改数据信息
            updateDate: {
                id: "",
                account: "",
                password: "",
                nickname: "",
                telephone: "",
                role: "",
                isDel: ""
            },


            // 后端服务器路径
            lastUrl: "http://localhost:8080/emp"
        }
    },
    methods: {
        // 更新页面
        handleSizeChange() { },
        handleCurrentChange() { },

        // 搜索按钮
        onSubmit() { },

        // 加载数据库信息到页面
        loadEmpData() {
            axios.get(this.lastUrl + "/selectEmp").then((resp) => {
                this.tableData = resp.data;
                this.tatal = resp.data.length;
            })
        },

        // 改变修改操作的默认值
        changeEmp(row) {
            this.updateDate = row;
        },
        // 修改员工信息
        updateEmp() {
            
            axios({
                method: "post",
                url: this.lastUrl + "/updateEmp",
                data: qs.stringify(this.updateDate),
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                }
            }).then(resp => {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                });
                // 清空数据
                this.updateDate = {
                    id: "",
                    account: "",
                    password: "",
                    nickname: "",
                    telephone: "",
                    role: "",
                    isDel: ""
                };
                // 重新加载数据
                this.loadEmpData();
                // 关闭弹窗
                this.update = false;
            })
        },

        // 删除员工信息
        delEmp(row) {
            axios({
                method: "post",
                url: this.lastUrl + "/delEmp",
                data: 'id=' + row.id
            }).then(
                resp => {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    });
                    this.loadEmpData();
                }
            )
        }
    },
    // 初始化加载数据信息到页面
    created() {
        this.loadEmpData();
    }
}
</script>

<style scoped></style>